<template>
    <section id="select_region">
        <header>
            <i class="iconfont icon-icon--" @click="goBack"></i>
            <h1>区域</h1>
            <div></div>
        </header>
        <ul class="select_region_list">
            <li v-for="item in list" :key="item.id" @click="select(item.id)">
                <p>{{item.name}}</p>
                <i class="iconfont icon-icon--"></i>
            </li>
        </ul>
    </section>
</template>
<script>
import TitleGoBack from "../../components/common/TitleGoBack";

export default {
  components: {
    TitleGoBack
  },
  data() {
    return {
      title: "区域",
      list: [
        {
          id: 1,
          name: "龙华"
        },
        {
          id: 2,
          name: "秀英"
        },
        {
          id: 3,
          name: "美兰"
        },
        {
          id: 4,
          name: "琼山"
        },
      ],
      path: 1,
    };
  },
  methods: {
    //   返回上一层
    goBack() {
        // 如果path === 1时，为只有一层，则返回上一页
        if(this.path === 1){
            this.$router.go(-1);
        }
        this.path--
         this.list = [
        {
          id: 1,
          name: "龙华"
        },
        {
          id: 2,
          name: "秀英"
        },
        {
          id: 3,
          name: "美兰"
        },
        {
          id: 4,
          name: "琼山"
        },
      ]
    },
    //   选中区域
    select(e) {
        if(this.path === 2){
            this.$router.go(-1)
            return
        }
        this.path++
        let list = [
            {
                id:1,
                name: '二级区域'
            },
            {
                id:2,
                name: '二级区域2'
            },
            {
                id:3,
                name: '二级区域3'
            },
        ]
        this.list = list
    }
  }
};
</script>
<style scoped>
#select_region {
}
#select_region header {
  padding: 0 10px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e6191e;
  position: fixed;
  top: 0;
  width: 100%;
}
#select_region header h1 {
  font-weight: normal;
  font-size: 1.2rem;
  color: #fff;
}
#select_region header .iconfont {
  transform: rotate(180deg);
  color: #fff;
  font-size: 18px;
}
#select_region header div {
  width: 1em;
}
.select_region_list {
  list-style: none;
  margin: 0;
  padding: 50px 10px 0;
  border-bottom: 1px solid #eee;
}
.select_region_list li {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid #eee;
}
.select_region_list li:last-child {
  border-bottom: none;
}
</style>
